<!-- 充值，兑换，积分记录 -->
<template>
	<view class="index fs28">
		<view class="title" @click="showPicker">
			
			<text class="color-DFB">
			  <text style="color: #747384;">查询范围 &emsp;</text>	  {{time.from}} 至 {{time.to}}
			</text>
			<view class="btm">
				<image src="../../static/icon/bottom.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="money">
			<text v-if="title == 'cz'">合计充值金额：{{pay_price || 0}}元</text>
			<text v-if="title == 'jf'">当前积分：{{info.user_account.integral || 0}}</text>
		</view>
		<view v-if="title == 'cz'">
			<view v-if="listDatas.length > 0">
				<view class="cz-jl" v-for="(item,index) in listDatas" :key='index'>
					<view class="cz-title">
						<text style="fontSize:18upx">订单号{{item.order_no}}</text>
						<text>{{item.success_text}}</text>
					</view>
					<view class="cz-money">
						<view class="cz-left">
							<view class="col-fd8">
								<text class="font-new">¥{{item.pay_price }}</text>
								<text>元</text>
							</view>
							<view>
								充值金额(元)
							</view>
						</view>
						<view class="spans"></view>
						<view class="cz-right">
							<view class="color-DFB">
								<text class=" font-new">+{{item.integral}}</text>
								<text>积分</text>
							</view>
							<view>
								积分
							</view>
						</view>
					</view>
				</view>
				<view class="no-data mt100">
					<view class="flex-jc-ac">
						暂无更多数据哦~
					</view>
					<view class="flex-jc-ac">
						快去充值获得更多积分吧
					</view>
				</view>
			</view>
			<view v-else class="flex-jc-ac uni-column mt100">
				<view class="nodatas">
					<image src="/static/icon/nodatas.png" mode=""></image>
				</view>
				<view class="">
					暂无记录哦~
				</view>
			</view>

		</view>
		<view v-if="title == 'jf'">
			<view v-if="listDatas.length > 0">
			<view class="jf-jl mt20 flex" v-for="item in listDatas" :key='item.id'>
				<view class="jf-left">
					<view class="flex-column">
						<text class="font-new" :style="{'fontSize':item.integral > 99999 ?'30upx':'64upx'}">{{item.integral_text}}</text>
						<text>变动积分</text>
					</view>
				</view>
				<view class="jf-right flex">
					<view class="flex-column">
						<text :style="{'margin-bottom':'16upx',color:shiy?'#C9C9C9':''}">订单号{{item.id}}</text>
						<text>{{item.created_at}}</text>
					</view>
					<view class="jf-sp">
						<text>{{item.type_text}}</text>
					</view>
				</view>
			</view>
			<view class="no-data mt100">
				<view class="flex-jc-ac">
					暂无更多数据哦~
				</view>
				<view class="flex-jc-ac">
					快去充值获得更多积分吧
				</view>
			</view>
			</view>
			<view v-else class="flex-jc-ac uni-column mt100">
				<view class="nodatas">
					<image src="/static/icon/nodatas.png" mode=""></image>
				</view>
				<view class="">
					暂无记录哦~
				</view>
			</view>
		</view>
		<view v-if="title == 'dh'">
			<view v-if="listDatas.length > 0">
			<view class="dh-jl mt20" v-for="(dhItem, index) in listDatas" :key='index'>
				<view class="dh-left " :class="arr[dhItem.colour]">
					<view class="dh-imgs">
						<image src="/static/icon/guan.png" mode="widthFix"></image>
					</view>
					<view class="dh-text">
						<text>{{dhItem.member_name}}</text>
					</view>
				</view>
				<view class="dh-right">
					<view class="dh-dan flex-column">
						<text :style="{'margin-bottom':'16upx',color:shiy?'#C9C9C9':'',fontSize:'18upx'}">订单号{{dhItem.order_no}}</text>
						<text>{{dhItem.start_at}}</text>
					</view>
					<view class="dh-shiyong">
						<text v-if="dhItem.order_status != 2" :style="{color:dhItem.order_status==0?'#FFD700':'#FC315A'}">{{dhItem.order_status_text}}</text>
						<text v-else >{{dhItem.order_status_text}}</text>
					</view>
				</view>
			</view>
			<view class="no-data mt100">
				<view class="flex-jc-ac">
					暂无更多数据哦~
				</view>
				<view class="flex-jc-ac">
					快去充值获得更多积分吧
				</view>
			</view>
			</view>
			<view v-else class="flex-jc-ac uni-column mt100">
				<view class="nodatas">
					<image src="/static/icon/nodatas.png" mode=""></image>
				</view>
				<view class="">
					暂无记录哦~
				</view>
			</view>
		</view>
		<w-picker mode="range" startDate="2017" disabledAfter :defaultVal="mydates()" :current="false"
		 @confirm="onConfirm" ref="range" themeColor="#f00" :close='true'>
		</w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import { apiGetAccountIndex,apiGetOrderMemberIndex,apiGetOrderIntegralIndex,apiGetOrderIntegralCount} from '@/api/me.js';
	import {dates} from "@/utils/common.js"
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				pay_price:0,
				title: "",
				time: {
					to: '',
					from: ''
				},
				types: '',
				arr:["",'baiy','huanj','heij'],
				info:{},
				shiy: false,
				listDatas:[],
				tempList:[],
				czPage:1,
				jfPage:1,
				dhPage:1,
				initData:{},
				pageSize:15
			}
		},
		
		onLoad(data) {
			this.init(data)
		},
		methods: {
			init(data){
				return new Promise((resfn,rejfn)=>{
					this.initData = data
					this.info = uni.getStorageSync("userinfo")
					this.time.to = dates('本月')[1]
					this.time.from = dates('本月')[0]
					this.title = data.title || "cz"
					this.listDatas = []
					this.getData(this.title)
					let type = {
						jf:'积分',
						cz:'充值',
						dh:'兑换'
					}
					
					uni.setNavigationBarTitle({
						title: type[this.title] + '记录'
					});
					resfn()
				})
			},
			mydates(){
				return dates('本月')
			},
			showPicker() {
				this.$refs.range.show()
			},
			onConfirm(e) {
				this.time = e
				this.listDatas = []
				this.tempList = []
				this.czPage = 1
				this.jfPage = 1
				this.dhPage = 1
				this.getData(this.title)
			},
			getData(type,bool){
				
				if(type == 'cz'){
					apiGetOrderIntegralIndex({start_created_at:this.time.from,end_created_at:this.time.to,page:this.czPage,page_size:this.pageSize}).then(res=>{
						if(bool)this.listDatas = []
						this.tempList = res.data.data
						this.listDatas = this.listDatas.concat(res.data.data)
					})
					apiGetOrderIntegralCount({start_created_at:this.time.from,end_created_at:this.time.to}).then(res=>{
						this.pay_price = res.data.pay_price
					})
				}else if(type == 'dh'){
					apiGetOrderMemberIndex({start_created_at:this.time.from,end_created_at:this.time.to,page:this.dhPage,page_size:this.pageSize}).then(res=>{
						if(bool)this.listDatas = []
						this.tempList = res.data.data
						this.listDatas = this.listDatas.concat(res.data.data)
					})
				}else{
					apiGetAccountIndex({start_created_at:this.time.from,end_created_at:this.time.to,page:this.jfPage,page_size:this.pageSize}).then(res=>{
						if(bool)this.listDatas = []
						this.tempList = res.data.data
						this.listDatas = this.listDatas.concat(res.data.data)
					})
				}
				
			}
		},
		onReachBottom(){
			if(this.title == 'cz'){
				if (this.tempList.length < this.pageSize) {
					return
				}
				this.czPage++
			}else if(this.title == 'jf'){
				if (this.tempList.length < this.pageSize) {
					return
				}
				this.jfPage++
			}else{
				if (this.tempList.length < this.pageSize) {
					return
				}
				this.dhPage++
			}
			
			
			this.getData(this.title)
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init(this.initData,true).then(res=>{
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			})
		
		}
	}
</script>

<style scoped lang="scss">
	.nodatas{
		width: 496upx;
		height: 310upx;
	}

	.title {
		display: flex;
		padding: 40upx 0;
		border-bottom: 1px solid #1C1B2B;
		align-items: center;
	}

	.mt100 {
		margin-top: 100upx;
	}

	.mt20 {
		margin-top: 20upx;
	}

	.index {
		color: #747384;
		padding: 0 26upx;

	}
	
	

	.col-fd8 {
		color: #FFD800;
	}

	.btm {
		width: 32upx;
		height: 32upx;
		margin-left: 10upx;
		vertical-align: sub;
	}

	.money {
		color: #FFD800;
		margin: 40upx 0;
	}

	// 充值记录
	.cz-jl {
		width: 100%;
		height: 116*2upx;
		border-radius: 4*2upx;
		border: 1px solid rgba(67, 66, 84, 1);
		overflow: hidden;
		margin-bottom: 20upx;

		.cz-title {
			font-size: 24upx;
			line-height: 32px;
			display: flex;
			justify-content: space-between;
			padding: 0 20upx;
			height: 32px;
			background: rgba(28, 27, 43, 1);
		}

		.cz-money {
			display: flex;
			align-items: center;
			height: 84*2upx;
			justify-content: space-around;
		}

		.cz-left {
			display: flex;
			flex-flow: column;
			align-items: center;
		}

		.spans {
			background: #76727B;
			width: 1upx;
			height: 80upx;
		}

		.cz-right {
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
		}

		.font-new {
			font-family: money;
			font-size: 64upx;
			margin-right: 6upx;
		}
	
	}

	// 兑换记录
	.dh-jl {
		width: 100%;
		height: 70*2upx;
		border-radius: 4*2upx;
		border: 1px solid rgba(67, 66, 84, 1);
		overflow: hidden;
		display: flex;

		.dh-left {
			width: 180upx;
			height: 100%;
			position: relative;
			background: #1D1B29;
			color: #434254;
		}

		.huanj {
			color: #000;
			background: linear-gradient(86deg, #AE7C24 0%, #D4C394 100%);
		}

		.baiy {
			color: #000;
			background: linear-gradient(86deg, #737375 0%, #D6D6D8 100%);
		}

		.heij {
			color: #fff;
			background: linear-gradient(86deg, #3E3D40 0%, #1B1C17 100%);
		}

		.dh-imgs {
			width: 64*2upx;
			height: 64*2upx;
			position: absolute;
			left: -38upx;
			top: 6upx;
		}

		.dh-text {
			width: 100%;
			height: 140upx;
			text-align: center;
			line-height: 140upx;
		}

		.dh-right {
			width: 260*2upx;
			display: flex;
		}

		.dh-dan {
			font-size: 24upx;
			width: 180*2upx;
			justify-content: center;
			padding-left: 40upx;
		}

		.dh-shiyong {
			display: flex;
			align-items: center;
			padding-left: 10upx;
		}
	}

	// 积分记录
	.jf-jl {
		.font-new {
			font-family: money;
			font-size: 64upx;
			color: #DDDBFB;
		}

		.jf-left {
			width: 80*2upx;
			padding-top: 16upx;
			transform: translateX(-10upx);
			text-align: center;
		}

		.jf-right {
			width: 270*2upx;
			height: 140upx;
			border-radius: 4px;
			border: 1px solid rgba(67, 66, 84, 1);
			justify-content: space-between;
			.flex-column {
				margin-left: 32upx;
				font-size: 24upx;
				justify-content: center;
			}
		}

		.jf-sp {
			color: #DDDBFB;
			width: 66*2upx;
			text-align: center;
			height: 140upx;
			line-height: 140upx;
		}
	}
	.no-data{
		padding-bottom: 40upx;
	}
	
</style>
